<template>
	<view>
		<view class="u-flex u-row-between u-padding-20">
			<view class="list_title">
				<view>
					<text>待收账单</text>
					<text class="red_title">3笔</text>
				</view>
				<view>
					<text>待收金额</text>
					<text class="red_title">￥500</text>
				</view>
			</view>
			<view class="list_title">
				<view>
					<text>已收账单</text>
					<text class="green_title">1笔</text>
				</view>
				<view>
					<text>已收金额</text>
					<text class="green_title">￥200</text>
				</view>
			</view>
		</view>
		<view class="u-padding-20">
			<view class="list_con u-rela u-margin-bottom-20" v-for="(item,index) in list" :key="index" @click="feeDetail(item.id)">
				<view v-if="item.status==1" class="u-abso status" style="background-color: #18B566;">{{item.status_label}}</view>
				<view v-if="item.status==0" class="u-abso status" style="background-color: #ff0000;">{{item.status_label}}</view>
				<view class="title_con">
					<text class="u-margin-right-20">{{item.house}}</text>
					<text>{{item.name}}</text>
				</view>
				<view>
					<text>缴费类型：</text>
					<text>{{item.type}}</text>
				</view>
				<view>
					<text>应缴费用：</text>
					<text>{{item.allfee}}</text>
				</view>
				<view>
					<text>欠缴费用：</text>
					<text>{{item.qianfee}}</text>
				</view>
				<view>
					<text>账单日期：</text>
					<text>{{item.time}}</text>
				</view>
				<view v-if="item.status==0" class="u-abso status_btn" style="background-color: #ff5500;">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list:[{
					id:1,
					status:0,
					status_label:'未缴',
					house:'A区3号楼202',
					name:'木某某',
					type:'电费',
					allfee:'￥555',
					qianfee:'￥555',
					time:'2022-5-20'
				},{
					id:2,
					status:0,
					status_label:'未缴',
					house:'A区3号楼202',
					name:'木某某',
					type:'电费',
					allfee:'￥555',
					qianfee:'￥555',
					time:'2022-5-20'
				},{
					id:3,
					status:1,
					status_label:'已缴',
					house:'A区3号楼202',
					name:'木某某',
					type:'电费',
					allfee:'￥555',
					qianfee:'￥555',
					time:'2022-5-20'
				}]
			}
		},
		methods:{
			feeDetail:function(id){
				uni.navigateTo({
					url:'./propertyfeeDetail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F3F5F7;
	}
	.list_title{
		padding:20rpx;
		width:47%;
		text-align: center;
		background-color: #fff;
	}
	.list_title text{
		display: block;
		color:#666;
		font-size: 28rpx;
	}
	.list_title .red_title{
		color:#ff0000;
		margin-top:10rpx;
	}
	.list_title .green_title{
		color:#18B566;
		margin-top:10rpx;
	}
	.list_con{
		padding:20rpx;
		font-size: 26rpx;
		color:#666;
		background-color: #fff;
	}
	.list_con view{
		padding:10rpx 0;
	}
	.title_con{
		font-size: 30rpx;
		color:#333;
	}
	.status{
		right:0;
		top:0;
		width:80rpx;
		height:70rpx;
		text-align: center;
		// line-height: 60rpx;
		color:#fff;
		font-size: 24rpx;
		border-bottom-left-radius: 100%;
		// background-color: #ff0000;
	}
	.status_btn{
		right:0;
		bottom:20rpx;
		width:120rpx;
		height:50rpx;
		color:#fff;
		text-align: center;
		// line-height: 50rpx;
		border-top-left-radius: 25rpx;
		border-bottom-left-radius: 25rpx;
	}
</style>
